<template>
  <!-- 团员管理 -->
  <base-breadcrumb :title="$route.meta.title">
    <a-row :gutter="10" class="page-height">
      <!-- 树搜索 -->
      <a-col :span="6">
        <a-card class="page-height-tree">
          <title-name title="团组织架构"></title-name>
          <!-- 团组织树搜索 -->
          <!-- :expandByAuto="true" -->
          <TreeLeagueOrg ref="treeOrganization" @loader="getTable" :datas="treeDataList" :defaultSelectedKeys="defKeys"
            :selectedKeys.sync="selectedKeys" :selectOptions.sync="selectOptions" :showChildWithSearch="true"
            :istakeOutHight="true" />
        </a-card>
      </a-col>
      <a-col :span="18" class="page-height-list-wrapper">
        <!-- 搜索 -->
        <searchData class="party-search" :searchData="searchArr" @search="search" :labelCol="{ span: 10 }"
          :wrapperCol="{ span: 14 }" :rowCount="2"></searchData>
        <!-- 表格 -->

        <a-card :bordered="false" class="page-height-list">
          <!-- <title-name title="团员信息列表"></title-name> -->
          <a-button class="mb12" type="primary" v-btnPermission="'pa_013_add_01'"
            :disabled="(selectedKeys.length == 0) || selectOptions.orgType !== 3"
            @click="showAddMemberModal('add')">新增团员</a-button>
          <a-button class="mb12" type="primary" v-btnPermission="'pa_013_ren_07'"
            @click="updateModalVisible = true">更新团费缴至时间</a-button>
          <div class="pub-table-select-count" style="margin: 10px 0">
            <a-icon type="info-circle" theme="twoTone" />
            <span>
              共计：
              <a>{{ statisticsInfo.totalNum || 0 }} 个</a>
            </span>
          </div>
          <!-- 表格 -->
          <list-table ref="table" size="default" rowKey="id" :columns="columns" :request="loadData" :alert="true"
            show-size-changer show-quick-jumper showPagination="auto">
            <span slot="status" slot-scope="text, record">
              {{ text == 2 ? '对内转出中' : '正常' }}
            </span>
            <template slot="action" slot-scope="text, record">
              <!-- v-btnPermission="" -->
              <MoreButton>
                <a v-btnPermission="'pa_013_loo_02'" @click="handleManage('look', record)">查看</a>
                <a v-btnPermission="'pa_013_edi_03'" @click="handleManage('edit', record)">编辑</a>
                <span v-btnPermission="'pa_013_shi_04'" v-if="record.status == 1">

                  <a @click="showInwardTransferModal(record, 'turnIn')">对内转出</a>
                </span>
                <span v-btnPermission="'pa_013_rol_05'" v-if="record.status == 1">

                  <a @click="showInwardTransferModal(record, 'turnOut')">对外转出</a>
                </span>
                <span v-btnPermission="'pa_013_moi_06'" v-if="record.status == 2">
                  <approval-button :id="record.id" text="审批信息"></approval-button>
                </span>
              </MoreButton>
            </template>
          </list-table>
        </a-card>
      </a-col>
    </a-row>

    <Transfer :visible.sync="inwardTransferModal.visible" :initData="inwardTransferModal.childInitData"
      :modalType="inwardTransferModal.type" @ok="getTable"></Transfer>


    <AddMember :visible.sync="addMemberModalVisible" :curOption="selectOptions" @submitSuccess="getTable" />

    <Update :visible.sync="updateModalVisible" @ok="getTable"></Update>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import Selector from '@/components/Select/Selector'
import BasePage from '@/views/basePage' // 基础配置
import SelectHierarchy from '@/components/Select/SelectHierarchy'
import TreeLeagueOrg from '@/components/businessComponents/TreeLeagueOrg' // 树

import Transfer from './transfer.vue'
import AddMember from './addMember.vue'
import Update from './updateDuesEndTime.vue'
import { getPageYouthMember, cancelByPrimaryKey } from '@/api/partyMasses/leagueManage'
const searchArr = [
  // 搜索框
  {
    name: '团员名称/团支部名称/手机号码/员工编号',
    type: 'input',
    value: 'conditions',
  },
  {
    name: '状态',
    value: 'status',
    type: 'select',
    data: [
      { value: '2', label: '对内转出中' },
      { value: '1', label: '正常' }
    ]
  }
]
const columns = [
  {
    title: '序号',
    width: 80,
    dataIndex: 'index',
    customRender() {
      return arguments[2] + 1
    },
  },
  {
    title: '团员名称',
    width: '150px',
    dataIndex: 'userName',
  },
  {
    title: '团支部名称',
    width: '300px',
    dataIndex: 'youthOrgName',
  },
  {
    title: '入团时间',
    width: '120px',
    dataIndex: 'leagueTime',
  },
  {
    title: '团费缴至时间',
    width: '120px',
    dataIndex: 'duesEndTime',
  },
  {
    title: '员工编号',
    width: '110px',
    dataIndex: 'employeeNum',
  },
  {
    title: '手机号码',
    dataIndex: 'phone',
    width: '120px',
  },
  {
    title: '团内职务',
    width: '200px',
    ellipsis: true,
    dataIndex: 'youthPost',
  },
  {
    title: '当前岗位',
    width: '200px',
    ellipsis: true,
    dataIndex: 'currentPost',
  },
  {
    title: '状态',
    width: '90px',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '120px',
    fixed: 'right',
    // align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name: 'a' + Date.now(),
  extends: new BasePage(),
  components: {
    AddMember,
    STable,
    TreeLeagueOrg,
    Transfer,
    Update
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      queryParam: {}, // 查询参数
      treeDataList: [],
      defOptions: {},
      defKeys: [],
      selectOptions: {}, // 选中节点对象
      selectedKeys: [],
      statisticsInfo: {
        totalNum: 0,
      },
      inwardTransferModal: {
        visible: false,
        childInitData: {},
        type: 'turnIn',
        curId: null,
        curName: null
      },
      addMemberModalVisible: false,
      addMemberForm: {
        personIds: []
      },
      updateModalVisible: false,
      addModalVisible: false,
      loadData: (parameter) => {
        const query = {
          youthOrgId: this.selectedKeys.length ? this.selectedKeys[0] : '',
          ...this.queryParam
        }
        const requestParameters = Object.assign({}, parameter, { query: query })
        return getPageYouthMember(requestParameters).then((res) => {
          const obj = {
            code: 200,
            data: res.data.list || [],
            totalSize: res.data.total,
            currentPage: res.data.pageNum
          }
          this.statisticsInfo.totalNum = res.data.total;
          return obj
        })
      }, // 加载数据方法 必须为 Promise 对象

      form: {},
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    refresh() {
      this.$refs.treeOrganization.getList().then((res) => {
        const def = this.treeDataList.find((item) => {
          return (!item.disabled)
        })
        this.defOptions = def;
        this.selectOptions = def;
        this.selectedKeys = def ? [def.id] : [];
        this.defKeys = def ? [def.id] : [];
        this.$refs.table && this.$refs.table.refresh()
      })
    },
    // 搜索
    search(value) {
      const params = { ...value };
      if (params) {
        this.queryParam = {
          ...params
        }
      };
      this.$refs.table.refresh()
    },
    getTable(value) {
      this.$refs.table.refresh()
    },
    showAddMemberModal() {
      this.addMemberModalVisible = true;
    },
    showInwardTransferModal(data, pageType) {
      this.inwardTransferModal.childInitData = {
        id: data.id,
        youthMemberName: data.userName
      }
      this.inwardTransferModal.visible = true;
      this.inwardTransferModal.type = pageType;
    },
    // 操作栏
    handleManage(type, record, addpersion = 'false') {
      if (type == 'look') {
        this.$router.push({
          name: 'LeagueManageMemberDetail',
          query: {
            id: record.id || '',
            type: type
          }
        })
      } else if (type == 'edit') {
        this.$router.push({
          name: 'LeagueManageMemberEdit',
          query: {
            id: record.id || '',
            type: type
          }
        })
      }
    },
  },
}
</script>
<style lang="less" scoped>
// .party-search {
//   /deep/ .ant-form-item .ant-form-item-label {
//     width: 142px;
//   }
// }
.mb12 {
  margin-right: 10px;
}
</style>
